Осваиваем CSS @starting-style: определяем начальные состояния анимации

В динамичном мире веб-разработки анимация играет решающую роль в улучшении пользовательского опыта, обеспечении визуальной обратной связи и управлении взаимодействием с пользователем. Хотя CSS-анимация и переходы значительно эволюционировали, точный контроль начального состояния анимации, особенно когда она запускается взаимодействием с пользователем или изменением состояния, часто представлял собой непростые задачи. Представляем @starting-style at-rule, мощную функцию CSS, разработанную для элегантного решения этой проблемы.

Понимание проблемы: первый кадр анимации

Традиционно, когда анимация или переход применяется к элементу, его начальное состояние определяется текущими вычисленными стилями элемента *в момент начала анимации/перехода*. Это может привести к неожиданным визуальным скачкам или несоответствиям, особенно в таких сценариях, как:

• Навигация между страницами: Когда компонент анимируется на новой странице, его начальные стили могут отличаться от задуманных, если это не обработано должным образом.
• Запуск анимации при наведении или фокусировке: Элемент может иметь стили, которые ненадолго мигают или изменяются до того, как анимация плавно вступит в силу.
• Анимация, применяемая через JavaScript: Если JavaScript динамически добавляет класс, который запускает анимацию, состояние элемента непосредственно перед добавлением класса влияет на начало анимации.
• Анимация с использованием display: none или visibility: hidden: Элементы, которые изначально не отображаются, не могут участвовать в анимации до тех пор, пока они не станут видимыми, что приводит к внезапному появлению, а не к плавному входу.

Рассмотрим простой пример: вы хотите, чтобы элемент плавно появлялся и увеличивался. Если элемент изначально имеет opacity: 0 и transform: scale(0.5), а затем применяется CSS-анимация, которая нацелена на opacity: 1 и transform: scale(1), анимация начинается с его текущего состояния (невидимый и уменьшенный). Это работает, как и ожидалось. Однако что, если элемент изначально имеет opacity: 1 и transform: scale(1), а затем применяется анимация, которая должна начинаться с opacity: 0 и scale(0.5)? Без @starting-style анимация начнется с существующего opacity: 1 и scale(1) элемента, фактически пропуская предполагаемую начальную точку.

Представляем @starting-style: решение

At-rule @starting-style предоставляет декларативный способ определения начальных значений для CSS-анимаций и переходов, которые применяются к элементу при его первом добавлении в документ или когда он входит в новое состояние. Он позволяет указать набор стилей, с которых начнется анимация, независимо от стилей элемента по умолчанию во время его создания или в начале перехода.

Это особенно эффективно при использовании в сочетании с:

• Анимация @keyframes: Определение начального состояния для анимаций, которые могут начинаться не с 0% (или from).
• CSS-переходы: Обеспечение плавного перехода из непереходного состояния в начало перехода.

Как @starting-style работает с @keyframes

Когда вы используете @starting-style с анимацией @keyframes, вы можете указать стили, которые должны применяться *до* первого ключевого кадра анимации (обычно ключевого кадра 0% или from). Это особенно полезно для анимаций, которые должны начинаться с «невидимого» или «свернутого» состояния, но в противном случае элемент может отображаться со стилями видимыми по умолчанию.

Синтаксис прост:

            
@keyframes fadeAndScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.my-element {
  /* Other styles */
  animation: fadeAndScale 1s ease-out forwards;
}

@starting-style {
  opacity: 0;
  transform: scale(0.5);
}

            

              
                Copy
              
            
          

В этом примере .my-element должен исчезать и уменьшаться. Если бы он изначально отображался с opacity: 1 и transform: scale(1), анимация, начинающаяся с from { opacity: 1; transform: scale(1); }, казалась бы мгновенной, потому что она уже находится в состоянии «from». Однако, используя @starting-style, мы явно говорим браузеру:

• Когда эта анимация начинается, элемент должен быть визуально подготовлен с opacity: 0.
• И его преобразование должно быть scale(0.5).

Это гарантирует, что даже если естественное состояние элемента отличается, анимация правильно начинает свою последовательность с указанных начальных значений. Браузер эффективно применяет эти значения @starting-style, затем запускает ключевой кадр from с этих значений и переходит к ключевому кадру to. Если для анимации установлено значение forwards, конечное состояние ключевого кадра to сохраняется после завершения анимации.

Как @starting-style работает с переходами

Когда к элементу применяется CSS-переход, он плавно интерполирует стили элемента *до* того, как произойдет переход, и его стили *после* того, как произойдет переход. Проблема возникает, когда состояние, запускающее переход, добавляется динамически или когда вы хотите, чтобы переход начинался с определенной точки, которая не является состоянием отрисованным по умолчанию для элемента.

Рассмотрим кнопку, которая увеличивается при наведении. По умолчанию переход плавно перемещается из состояния кнопки без наведения в состояние с наведением.

            
.my-button {
  transition: transform 0.3s ease;
}

.my-button:hover {
  transform: scale(1.1);
}

            

              
                Copy
              
            
          

Это работает отлично. Переход начинается с transform: scale(1) кнопки по умолчанию до transform: scale(1.1).

Теперь представьте, что вы хотите, чтобы кнопка анимировалась *внутри* с эффектом масштабирования, а затем при наведении масштабировалась *дальше*. Если кнопка изначально появляется в полном размере, переход при наведении прост. Но что, если кнопка появляется с использованием анимации плавного появления и масштабирования, и вы хотите, чтобы эффект наведения также был плавным масштабированием из ее *текущего* состояния, а не из ее исходного состояния?

Здесь @starting-style становится бесценным. Он позволяет определить начальное состояние перехода, когда этот переход применяется к элементу, который отображается впервые (например, когда компонент входит в DOM через JavaScript или загрузку страницы).

Допустим, у вас есть элемент, который должен плавно появляться и масштабироваться, а затем масштабироваться дальше при наведении. Вы можете использовать анимацию для входа, а затем переход для эффекта наведения:

            
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animated-card {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s ease-out forwards;
  transition: transform 0.3s ease;
}

.animated-card:hover {
  transform: scale(1.1);
}

/* Define the starting style for the initial entry animation */
@starting-style {
  opacity: 0;
  transform: scale(0.8);
}

            

              
                Copy
              
            
          

В этом сценарии правило @starting-style гарантирует, что элемент начнет рендеринг с opacity: 0 и transform: scale(0.8), что соответствует ключевому кадру from анимации fadeInScale. Как только анимация завершится и элемент установится на opacity: 1 и transform: scale(1), переход для эффекта наведения плавно интерполирует из этого состояния в transform: scale(1.1). Здесь @starting-style конкретно влияет на первоначальное применение анимации, гарантируя, что она начинается с желаемой визуальной точки.

Важно отметить, что @starting-style применим к переходам, которые применяются к элементам, которые только что были вставлены в документ. Если элемент уже существует и его стили изменяются, чтобы включить свойство перехода, @starting-style не влияет напрямую на начало этого конкретного перехода, если только элемент также не отображается заново.

Поддержка браузерами и реализация

At-rule @starting-style является относительно новым дополнением к спецификациям CSS. Что касается его широкого распространения:

• Chrome и Edge имеют отличную поддержку.
• Firefox имеет хорошую поддержку.
• Safari также предлагает хорошую поддержку.

Всегда рекомендуется проверять Can I Use для получения самой актуальной информации о совместимости с браузерами. Для браузеров, которые не поддерживают @starting-style, анимация или переход просто вернутся к существующим вычисленным стилям элемента во время вызова, что может привести к менее чем идеальному поведению, описанному ранее.

Рекомендации и расширенное использование

1. Последовательность - это ключ

Используйте @starting-style, чтобы обеспечить последовательный запуск анимации и переходов, независимо от того, как элемент вводится в DOM или какие его начальные вычисленные стили могут быть. Это способствует более предсказуемому и отточенному пользовательскому опыту.

2. Очистите свои ключевые кадры

Вместо того чтобы добавлять начальное состояние (например, opacity: 0) в ключевой кадр from каждой анимации, которая в этом нуждается, вы можете определить его один раз в @starting-style. Это делает ваши правила @keyframes более чистыми и более ориентированными на основное развитие анимации.

3. Обработка сложных изменений состояния

Для компонентов, которые подвергаются нескольким изменениям состояния или анимации, @starting-style может помочь управлять начальным внешним видом элементов при их добавлении или обновлении. Например, в одностраничном приложении (SPA), где компоненты часто монтируются и размонтируются, определение начального стиля анимации входа с помощью @starting-style обеспечивает плавный внешний вид.

4. Вопросы производительности

Хотя сам @starting-style по своей сути не влияет на производительность, анимация и переходы, которыми он управляет, влияют. Всегда стремитесь к анимации свойств, которые браузер может обрабатывать эффективно, таких как transform и opacity. По возможности избегайте анимации таких свойств, как width, height или margin, поскольку они могут вызывать дорогостоящие пересчеты макета.

5. Запасные варианты для старых браузеров

Чтобы обеспечить разумный опыт для пользователей в браузерах, которые не поддерживают @starting-style, вы можете предоставить запасные стили. Это естественные начальные стили элемента, с которых в противном случае начнется анимация. Во многих случаях поведение по умолчанию без @starting-style может быть приемлемым, если анимация проста.

Для более сложных сценариев может потребоваться JavaScript для определения поддержки браузера или применения определенных начальных стилей. Однако цель @starting-style - уменьшить потребность в таких вмешательствах JavaScript.

6. Глобальный охват и локализация

При разработке для глобальной аудитории анимация должна быть инклюзивной и не должна полагаться на визуальные подсказки, специфичные для конкретной страны. At-rule @starting-style - это техническая функция CSS, которая работает независимо от культурного контекста. Его ценность заключается в обеспечении последовательной технической основы для анимации, которую затем можно стилизовать и применять с учетом культурных особенностей. Обеспечение плавной анимации на разных устройствах и в разных сетевых условиях является универсальной целью для веб-разработчиков, и @starting-style способствует достижению этой согласованности.

Пример сценария: анимация карточки портфолио

Проиллюстрируем это с помощью распространенного шаблона веб-дизайна: сетка портфолио, где каждая карточка анимируется в поле зрения с небольшой задержкой и эффектом масштабирования.

Цель: Каждая карточка должна плавно появляться и масштабироваться с 0.9 до 1, и небольшая задержка должна применяться к каждой карточке по мере их появления в сетке.

HTML:

            
<div class="portfolio-grid">
  <div class="portfolio-item">Card 1</div>
  <div class="portfolio-item">Card 2</div>
  <div class="portfolio-item">Card 3</div>
  <div class="portfolio-item">Card 4</div>
</div>

            

              
                Copy
              
            
          

CSS:

            
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.portfolio-item {
  background-color: #f0f0f0;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  /* Default initial state */
  opacity: 0;
  transform: scale(0.9);

  /* Animation properties */
  animation: fadeInUpScale 0.6s ease-out forwards;
}

/* @keyframes for the animation */
@keyframes fadeInUpScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* @starting-style to define the initial state for the animation */
@starting-style {
  opacity: 0;
  transform: scale(0.9);
}

/* Applying delays to each item using :nth-child */
.portfolio-item:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-item:nth-child(2) {
  animation-delay: 0.2s;
}
.portfolio-item:nth-child(3) {
  animation-delay: 0.3s;
}
.portfolio-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Adjusting keyframes to show the effect */
@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

            

              
                Copy
              
            
          

Объяснение:

1. Элементы .portfolio-item изначально имеют значения opacity: 0 и transform: scale(0.9). Это их состояние до применения анимации.
2. @keyframes fadeInUpScale определяет анимацию от 0% (что фактически является начальным состоянием для развития анимации) до 100%.
3. Правило @starting-style явно объявляет, что при применении анимации fadeInUpScale она должна начинаться с opacity: 0 и transform: scale(0.9). Это гарантирует, что даже если стили по умолчанию каким-то образом изменятся, анимация все равно начнется с этой определенной точки.
4. Свойство animation-delay применяется к каждому дочернему элементу с помощью селекторов :nth-child, чтобы сместить появление карточек, создавая более визуально привлекательную последовательность.
5. Ключевое слово forwards гарантирует, что элемент сохранит стили из последнего ключевого кадра после завершения анимации.

Без @starting-style, если бы браузер неправильно интерпретировал начальные вычисленные стили .portfolio-item как начальную точку анимации, анимация могла бы начаться с другого, непреднамеренного состояния. @starting-style гарантирует, что анимация правильно начнет свою последовательность с намеченных значений.

Заключение

At-rule @starting-style - значительный шаг вперед в CSS-анимации и переходах. Это дает разработчикам возможность добиться более точного контроля над начальными состояниями анимированных элементов, что приводит к более плавным, предсказуемым и профессионально отточенным пользовательским интерфейсам. Понимая и внедряя @starting-style, вы можете поднять свою веб-анимацию с хорошего уровня до исключительного, обеспечивая последовательный и привлекательный опыт для вашей глобальной аудитории на широком спектре устройств и браузеров. Воспользуйтесь этим мощным инструментом для создания потрясающих анимированных веб-интерфейсов, которые действительно очаровывают пользователей.